<template>
	<view class="preview" @click="handlePreview">
		<swiper class="preview-swiper" circular>
			<swiper-item class="preview-item" v-for="(item, index) in 12" :key="index">
				<image class="image" src="/common/wallpaper/preview2.jpg" mode="aspectFill" />
				<view v-show="isMask" class="mask">
					<inte-page-nav-bar></inte-page-nav-bar>
					<view class="top">
						<view class="total">{{index}}/{{12-1}}</view>
						<uni-dateformat class="date1" :date="Date.now()" format="hh:mm"></uni-dateformat>
						<uni-dateformat class="date2" :date="Date.now()" format="MM 月 dd 日"></uni-dateformat>
					</view>
					<view class="bottom" @click.stop>
						<view class="info" @click="handleInfo">
							<uni-icons type="info" size="30"></uni-icons>
							<text class="text">信息</text>
						</view>
						<view class="rate" @click="handleRate">
							<uni-icons type="star" size="30"></uni-icons>
							<text class="text">5分</text>
						</view>
						<view class="download">
							<uni-icons type="download" size="30"></uni-icons>
							<text class="text">下载</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<rate-popup ref="ratePopupDom"></rate-popup>
		<info-popup ref="infoPopupDom"></info-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'


	let isMask = ref(true)
	const ratePopupDom = ref(null)
	const infoPopupDom = ref(null)

	function handlePreview() {
		isMask.value = !isMask.value
		console.log('触发了', isMask.value)
	}


	function handleInfo() {
		console.log('触发了')
		infoPopupDom.value.open()
	}

	function handleRate() {
		ratePopupDom.value.open()
	}

</script>

<style lang="scss" scoped>
	.preview {
		width: 100vw;
		height: 100vh;
		position: relative;
		

		.preview-swiper {
			width: 100%;
			height: 100%;

			.preview-item {
				.image {
					width: 100%;
					height: 100%;
					display: block;
				}
				
				.mask {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				
					.top {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						width: 100%;
						color: white;
						margin-top: 30rpx;
				
						.total {
							opacity: 0.5;
							font-size: 20rpx;
							padding: 5rpx 35rpx;
							border-radius: 20rpx;
							background: rgba(0, 0, 0, 0.3);
							backdrop-filter: blur(20rpx);
						}
				
						.date1 {
							font-size: 100rpx;
						}
				
						.date2 {
							font-size: 20rpx;
							color: white;
						}
					}
				
					.bottom {
						box-sizing: border-box;
				
						position: absolute;
						width: 520rpx;
						height: 120rpx;
						bottom: 150rpx;
						right: 0;
						left: 0;
						margin: auto;
				
						display: flex;
						justify-content: space-between;
						align-items: center;
				
						opacity: 0.9;
						background-color: rgba(255, 255, 255, 50);
						border-radius: 70rpx;
				
						.text {
							display: block;
							font-size: 20rpx;
						}
				
						.info {
							flex: 1;
							text-align: center;
						}
				
						.rate {
							flex: 1;
							text-align: center;
						}
				
						.download {
							flex: 1;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>